<template>
    <div class="warehouse-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" class="yuan-modal warehouse-detail-modal"
            @cancel="modalOption.onCancel">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="仓库名称">
                                <span class="yuan-form-show">{{ formData.name }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓库地址">
                                <span class="yuan-form-show">{{ formData.address }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓储方式">
                                <span class="yuan-form-show">{{ formData.storageWay }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓储条件">
                                <span class="yuan-form-show">{{ formData.storageStorage }}</span>
                            </a-form-model-item>

                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button type="primary" @click="modalOption.onCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { WarehouseListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoDetail!: WarehouseListRes;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.formData = { ...this.infoDetail };
    }
    formLoading = false;
    modalOption = {
        title: "仓库详情",
        onCancel: this.closeModal,
    };
    formData: any = {};
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
}
</script>
<style lang="scss">
.warehouse-detail-modal {
}
</style>
